<template>
    <div class="setting-friend-link-box">
        <div class="friend-link-action-bar">
            <el-button type="primary" size="medium" @click="showAddFriendLink()">添加友情链接</el-button>
        </div>

        <div class="friend-link-list-box">
            <el-table
                v-loading="friendLinkLoading"
                class="table-class"
                :data="friendLinks"
                style="width: 100%"
            >
                <el-table-column
                    fixed
                    prop="id"
                    label="ID"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="名称"
                    width="100">
                </el-table-column>
                <el-table-column
                    prop="url"
                    label="跳转连接"
                    width="120">
                    <template slot-scope="scope">
                        <a :href="scope.row.url" target="_blank">
                            {{ scope.row.url }}
                        </a>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="logo"
                    label="图片"
                    width="120">
                    <template slot-scope="scope">
                        <img :src="scope.row.logo" width="120px" alt="picture">
                    </template>
                </el-table-column>
                <el-table-column
                    prop="state"
                    label="状态"
                    width="100">
                    <template slot-scope="scope">
                        <div v-if="scope.row.state==='0'">
                            <el-tag type="danger">已删除</el-tag>
                        </div>
                        <div v-if="scope.row.state==='1'">
                            <el-tag type="danger">正常</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="order"
                    label="顺序"
                    width="50">
                </el-table-column>
                <el-table-column
                    label="创建时间"
                    width="120">
                    <template slot-scope="scope">
                        <span v-text="formatDate(scope.row.createTime)"></span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="更新时间"
                    width="120">
                    <template slot-scope="scope">
                        <span v-text="formatDate(scope.row.updateTime)"></span>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="150">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
                        <el-button type="danger"
                                   size="mini"
                                   @click="deleteItem(scope.row)"
                                   :disabled="scope.row.state==='0'">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="friend-link-dialog-bix">
            <!--            删除的弹窗-->
            <el-dialog
                title="提示"
                :visible.sync="deleteDialogVisible"
                width="400px">
                <span>你确定要删除:{{ deleteMessage }} 这个友情链接吗?</span>
                <span slot="footer" class="dialog-footer">
                <el-button @click="deleteDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="doDeleteItem()">确 定</el-button>
              </span>
            </el-dialog>

            <!--            添加的弹窗-->
            <el-dialog
                @close="resetData"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                :title="editTitle"
                :visible.sync="editorDialogVisible"
                width="45%">
                <div class="looper-editor-box">
                    <el-form :ref="this.formName" :model="friendLink" label-width="80px">
                        <el-form-item label="名称" prop="name">
                            <el-input v-model="friendLink.name" placeholder="输入标题"></el-input>
                        </el-form-item>
                        <el-form-item label="目标链接" prop="url">
                            <el-input v-model="friendLink.url" placeholder="输入目标url地址"></el-input>
                        </el-form-item>
                        <el-form-item
                            label="顺序" prop="order">
                            <el-input-number v-model="friendLink.order"
                                             :min="1"
                                             :max="10"></el-input-number>
                        </el-form-item>
                        <el-form-item
                            label="状态">
                            <el-select v-model="friendLink.state" placeholder="请选择分类状态">
                                <el-option
                                    label="正常"
                                    value="1">
                                </el-option>
                                <el-option
                                    label="禁用"
                                    value="0">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="logo上传">
                            <el-upload
                                class="avatar-uploader"
                                action="/admin/image/friend_link"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                                <img v-if="friendLink.logo" :src="friendLink.logo" class="avatar-box">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>

                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                <el-button @click="editorDialogVisible = false">取 消</el-button>
                <el-button type="primary"
                           @click="postAndPutLooper()"
                >{{ this.editorBtnText }}
                </el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import {success_code} from "@/utils/ResponseState";
import {formatDate} from "@/utils/date";
import {deleteFriendLink, listFriendLink, postFriendLink, updateFriendLink} from "@/api/friend-link-admin-api";

export default {
    name: "friend-link",
    data() {
        return {
            formName: "friend-link-form",
            friendLinks: [],
            deleteDialogVisible: false,
            deleteMessage: "",
            deleteItemId: "",
            editTitle: "添加",
            editorBtnText: "",
            editorDialogVisible: false,
            friendLink: {
                id: '',
                name: '',
                order: 1,
                state: '1',
                url: '',
                logo: '',
            },
            friendLinkLoading: false
        }
    },
    methods: {
        showAddFriendLink() {
            this.editTitle = '添加友情链接';
            this.editorBtnText = '添 加';
            this.editorDialogVisible = true;
        },
        edit(item) {
            // change data
            this.friendLink.id = item.id;
            this.friendLink.logo = item.logo;
            this.friendLink.name = item.name;
            this.friendLink.state = item.state;
            this.friendLink.url = item.url;
            this.friendLink.order = item.order;
            // change ui
            this.editorDialogVisible = true;
            this.editTitle = "更新友情链接"
            this.editorBtnText = "更 新"
        },
        deleteItem(item) {
            this.deleteDialogVisible = true;
            this.deleteMessage = item.name;
            this.deleteItemId = item.id;
            // console.log(item);
        },
        doDeleteItem() {
            deleteFriendLink(this.deleteItemId).then(result => {
                if (result.code === success_code) {
                    this.$message({
                        type: 'success',
                        center: true,
                        message: result.message
                    })
                } else {
                    this.$message.error(result.message);
                }
                this.initData();
            })

            this.deleteDialogVisible = false;
        },
        formatDate(dataStr) {
            let date = new Date(dataStr);
            return formatDate(date, "yyyy-MM-dd hh:mm:ss");
        },
        initData() {
            this.friendLinkLoading = true;
            listFriendLink().then(result => {
                if (result.code === success_code) {
                    this.friendLinks = result.data;
                    console.log(result.data);
                } else {
                    console.log(result.message);
                }
            })

            this.friendLinkLoading = false;
        },
        showAddCategory() {
            this.editTitle = '添加友情链接';
            this.editorBtnText = '添 加';
            this.editorDialogVisible = true;
        },
        postAndPutLooper() {
            // check data
            if (this.friendLink.logo === "") {
                this.$message.warning("图片不能为空")
                return;
            }

            if (this.friendLink.name === "") {
                this.$message.warning("标题不能为空");
                return;
            }
            if (this.friendLink.url === "") {
                this.$message.warning("链接不能为空");
                return;
            }

            if (!this.friendLink.url.startsWith("http://") && !this.friendLink.url.startsWith("https://")) {
                this.$message.warning("目标链接格式不正确");
                return;
            }


            if (this.friendLink.id === '') {
                postFriendLink(this.friendLink).then(result => {
                    if (result.code === success_code) {
                        this.$message({
                            type: 'success',
                            center: true,
                            message: result.message
                        })

                        this.initData()
                    } else {
                        this.$message.error(result.message);
                    }
                });
            } else {
                // console.log(this.friendLink.logo);
                updateFriendLink(this.friendLink).then(result => {
                    if (result.code === success_code) {
                        // change ui state
                        this.$message.success(result.message)

                        this.initData()
                    } else {
                        // change ui state
                        this.$message.error(result.message);
                    }
                });
            }

            this.resetData();
            this.editorDialogVisible = false
        },
        resetData() {
            this.friendLink.id = '';
            this.friendLink.name = '';
            this.friendLink.order = 1;
            this.friendLink.state = '1';
            this.friendLink.url = '';
            this.friendLink.logo = '';
        },
        // 图片上传后
        handleAvatarSuccess(response) {
            if (response.code === success_code) {
                this.$message.success(response.message);

                this.friendLink.logo = '/portal/image/' + response.data.path;
            } else {
                this.$message.error(response.message);
            }
        },
        // 图片上传前
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 5;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    },
    mounted() {
        // init data
        this.initData();
    }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: #8c939d dashed 1px;
    border-radius: 4px;
}

.avatar-box {
    width: 178px;
    height: 178px;
    display: block;
}
</style>l